<template>
	<div style="text-align: left">
		<el-button class="add-button" type="primary" @click="dialogFormVisible = true">添加病患信息</el-button>
		<el-dialog
				title="添加病患信息"
				:visible.sync="dialogFormVisible"
				@close="clear">
			<el-form :model="form" :rules="rules" style="text-align: left;width:80%;" ref="form">
				<el-table-column
						prop="id"
						label="id"
						hidden
						style="text-align: center"
						width="50">
				</el-table-column>
				
				<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
					<el-input v-model="form.name" autocomplete="off" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
					<el-radio v-model="form.sex" label="男">男</el-radio>
					<el-radio v-model="form.sex" label="女">女</el-radio>
				</el-form-item>
				<el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
					<el-input  v-model="form.age" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话号码"  :label-width="formLabelWidth" prop="telphone">
					<el-input  v-model="form.telphone"  maxlength="11"  show-word-limit autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="家庭地址" :label-width="formLabelWidth" prop="address">
					<el-input v-model="form.address" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="describ" label="症状" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form.describ"></el-input>
				</el-form-item>
				<!--	<el-form-item label="科室" :label-width="formLabelWidth" prop="subject">
						<el-select v-model="form.subject" placeholder="请选择">
						</el-select>
					</el-form-item>
					-->
				<el-form-item prop="id" style="height: 0">
					<el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="onSubmit('form')">提交</el-button>
				<el-button @click="resetForm('form')">重置</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
    export default {
        name: 'EditForm',
        // components: {ImgUpload},
        data () {
            return {
                dialogFormVisible: false,
                form: {
                    id: '',
                    name: '',
                    sex: '男',
                    age: '',
                    address: '',
                    describ: '',
                    telphone: ''
                    //  subject: '',
                },

                formLabelWidth: '100px',
                rules: {
                    name: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
                    telphone: [{required: true, message: '电话号码不能为空', trigger: 'blur'}],
                    address: [{required: true, message: '家庭地址不能为空', trigger: 'blur'}],
                }
            }
        },
        methods: {
            clear () {
                this.form = {
                    id: '',
                    name: '',
                    sex: '男',
                    age: '',
                    address: '',
                    describ: '',
                    telphone: ''
                    // subject: '',
                }
            },
            onSubmit (formName) {
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$http
                            .post('/patient/save', this.form).then(resp => {
                            if (resp.data == "success") {
                                _this.$alert('添加成功！', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        this.dialogFormVisible = false
                                    }
                                })
                            }
                        })
                    }
                    else {
                        return false;
                    }
                })
            },
            resetForm (formName) {
                this.$refs[formName].resetFields();
            },
            /* uploadImg () {
				 this.form.cover = this.$refs.imgUpload.url
			 }*/
        }
    }
</script>

<style scoped>
	.add-button {
		margin: 18px 0 0 10px;
	}
</style>
